<!-- Dom模板 -->
<template>
  <div class="bigs" ref="bigs">
    <!-- 顶部 -->
    <div class="top">
      <div class="top_left">
        <input type="text"  @focus="goSearch" name="" placeholder="2020夏令营" id="" />
        <span class="iconfont icon-sousuo"></span>
      </div>
      <!-- <div class="top_right">
        <span class="iconfont icon-weixinxiaochengxu"></span>
      </div> -->
    </div>
    <!-- 美可玩 -->
    <div class="wan">
      <p>
        <img
          class="animate__animated animate__bounceInLeft"
          src="../../../../static/img/图片 3@1x.png"
          alt 
        />
      </p>
      
      <p>
        <!-- <img class="iii" src="../../../../static/img/图片 2@1x.png" alt="" /> -->
      </p>
    </div>

    <!-- 图片区 -->
    <div v-for="(item, index) in data" :key="index">
      <div v-if="item.navType == 0" class="imgs">
        <img
          @click="goRwxq"
          class="animate__animated animate__bounceInRight"
          :src="bigImg"
          alt=""
        />
      </div>
    </div>
    <!-- 图片拖拽区 -->
    <div class="touchqu">
      <div
        class="bigtouchqu animate__animated animate__bounceInRight"
        ref="bigtouchqu"
      >
        <div class="chang" ref="chang">
          <div
            @click="tostor(item, index)"
            :style="{
              backgroundImage: 'url(' + item.bookImg + ')',
              backgroundRepeat: `no-repeat`,
              backgroundPosition: `152px 59px`,
            }"
            v-for="(item, index) in colorData"
            :key="index"
          >
            <p>{{ item.bookName }}</p>
            <p>{{ item.storyIntroduced }}</p>
            <p>
              <span class="iconfont icon-erji1"></span>{{ item.shareNumber }}次
            </p>
            <div>
              <span>{{ item.episodeNumber }}集</span>
            </div>
          </div>
          <!-- <div :style="div1">
            <p>奶爸来袭</p>
            <p>档位线来临时最大的危险就是奶爸！</p>
            <p><span class="iconfont icon-erji1"></span><span>53432次</span></p>
            <div><span>21集</span></div>
          </div>
          <div :style="div2">
            <p>宝贝最爱</p>
            <p>增强自信心，决战前夕的动员大会</p>
            <p><span class="iconfont icon-erji1"></span><span>13991次</span></p>
            <div><span>38集</span></div>
          </div>
          <div :style="div3">
            <p>宝妈必听</p>
            <p>十分钟让您懂宝贝心理</p>
            <p>
              <span class="iconfont icon-erji1"></span><span>982201次</span>
            </p>
            <div><span>21集</span></div>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 筛选数据 -->
    <div class="last">
      <div class="searchBar" id="searchBar">
        <ul :class="searchBarFixed == true ? 'isFixed' : ''">
          <li
            v-for="(item, index) in ulData"
            :key="index"
            @click="light(index)"
            :class="nowIndex === index ? 'bg' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <div>
        <div
          class="cont animate__animated animate__bounceInRight"
          v-for="(item, index) in ulData"
          :key="index"
          v-show="nowIndex === index"
        >
          <div
            class="pages"
            @click="btn(items, indexs)"
            v-for="(items, indexs) in item.list"
            :key="indexs"
          >
            <img :src="items.bookImg" alt="" />
            <div class="pp">
              <p>{{ items.bookName }}</p>
              <p><span>专注力</span><span>投入</span></p>
            </div>
          </div>
          <div class="pages">
            <img :src="bigImg" alt="" />
            <div class="pp">
              <p>提高专注力·我家来了外星人</p>
              <p><span>专注力</span><span>投入</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div>
      <!-- <Search /> -->
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import * as api from "../../api/home";

import Search from "../home_notregister/search.vue";
export default {
  name: "",
  components: {},
  data() {
    return {
      msg: "测试",

      // div1: {
      //   backgroundImage: `url(${picture1})`,
      //   backgroundRepeat: `no-repeat`,
      //   backgroundPosition: `152px 59px`,
      //   backgroundSize: `177px 123px`,
      // },
      // div2: {
      //   backgroundImage: `url(${picture2})`,
      //   backgroundRepeat: `no-repeat`,
      //   backgroundPosition: `198px 46px`,
      //   backgroundSize: `123px 138px`,
      // },
      // div3: {
      //   backgroundImage: `url(${picture3})`,
      //   backgroundRepeat: `no-repeat`,
      //   backgroundPosition: `152px 59px`,
      //   backgroundSize: `177px 123px`,
      // },
      flag: false,
      flagd: false,
      datalist: ["成长陪伴", "心理辅导", "推荐", "防疫抗疫", "习惯培养"],
      nowIndex: 2,
      data: [],
      bigImg: "",
      colorData: [],
      img: "",
      xinData: [],
      tuijian: [],
      ulData: [],
      searchBarFixed: false,
      searchFlag: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素)
  computed: {},
  components: {
    // Search,
  },
  mounted() {
    this.$refs.bigs.addEventListener("scroll", this.handleScrolls);

    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.bigtouchqu, {
        click: true,
        scrollX: true,
        bounce: {
          left: false,
          right: false,
        },
      });
    });
    api.bookData().then((res) => {
      this.data = res.data.code;
      // 我家来了外星人图片
      let bigImg = res.data.code[0].bookImg;
      this.bigImg = bigImg;
      // 获取到三个有颜色的背景图
      let colorData = res.data.code.filter((item, index) => {
        return item.backgroundColor;
      });
      this.colorData = colorData;
      // console.log(colorData);
      this.img = colorData[0].bookImg;
    });
    // 渲染除了推荐页的图书
    api.getinterest().then((res) => {
      // console.log(res);
      this.ulData = res.data.code;
      // console.log(this.ulData);
    });
    //电话
    let telephone = this.$store.state.order.user.title;
    if (telephone) {
      api.userbookdu({ telephones: telephone }).then((res) => {
        // console.log(res.data.code);
        this.tuijian = res.data.code;
        let str = [];
        for (let i = 0; i < 4; i++) {
          str.push(
            this.tuijian[
              Math.floor(Math.random() * (this.tuijian.length - 1 - 0 + 1) + 0)
            ]
          );
        }
        // console.log(str);
        this.ulData.splice(2, 1, {
          name: "推荐",
          list: str,
        });
        // console.log(this.ulData);
      });
    }
  },
  // Vue方法定义
  methods: {
    light(index) {
      this.nowIndex = index;
    },
    goRwxq() {
      this.$router.push("/rwxq");
    },
    btn(items, indexs) {
      this.$router.push({
        path: `/story/${items.bookId}`,
        query: { childs: items, idxs: indexs },
      });
    },
    tostor(item, index) {
      this.$router.push({
        path: `/story/${item.bookId}`,
        query: { childs: item, idxs: index },
      });
    },
    handleScrolls() {
      let scrollTop = this.$refs.bigs.scrollTop;
      // console.log(scrollTop, "滚动");
      let offsetTop = document.querySelector("#searchBar").offsetTop;
      // console.log(offsetTop, "top");
      scrollTop >= offsetTop
        ? (this.searchBarFixed = true)
        : (this.searchBarFixed = false);
    },
    // 去搜索页
    goSearch() {
        this.$router.push("/search")

    },
  },
};
</script>

<style scoped>
/* 顶部 */
@import url("../../../assets/font/iconfont.css");
.bigs {
  width: 100vw;
  height: calc(736px - 60px);
  overflow-y: auto;
}

.top {
  left: 0px;
  top: 0px;
  width: 414px;
  height: 88px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1212;
  align-items: flex-end;
  background-color: rgba(255, 255, 255, 100);
}
.top_left {
  margin-left: 19px;
  left: 19px;
  top: 50px;
  float: left;
  margin-right: 34px;
  margin-bottom: 6px;
  /* width: 90%; */
  width: 258px;
  height: 32px;
  border-radius: 100px;
  background-color: rgba(242, 242, 242, 100);
  color: rgba(191, 191, 191, 100);
  font-size: 14px;
  text-align: left;
  overflow: hidden;
  margin-bottom: 6px;
  font-family: Arial;
}
.top_left input {
  height: 32px;
  padding-left: 19px;
  background: none;
  border: none;
  outline: none;
}
.pages:last-child img{
  border-radius: 20px;
  overflow: hidden;
}
.top_right {
  left: 311px;
  float: left;
  top: 50px;
  width: 87px;
  height: 32px;
  line-height: 20px;
  margin-bottom: 6px;

  border-radius: 30px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  border: 1px solid rgba(232, 232, 232, 100);
}
.top_right span {
  font-size: 32px;
  display: inline-block;
  margin-top: 6px;
}
.animate__animated.animate__bounceInRight {
  --animate-duration: 1s;
}

.animate__animated.animate__bounceInLeft {
  --animate-duration: 1s;
}

:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
/* 美可玩 */
.wan {
  width: 414px;
  height: 60px;
  display: flex;
  line-height: 60px;
  margin-top: 88px;
  background: white;
  background-color: rgba(255, 255, 255, 100);
  height: 60px;
  line-height: 60px;
}
.wan p {
  line-height: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 100);
}
.wan p:nth-child(1) {
  padding-left: 10px;
  margin-right: 229px;
}
.wan p img {
  vertical-align: middle;
  background: rgba(255, 255, 255, 100);
}
.wan p:nth-child(1) img:nth-child(1) {
  width: 114px;
  height: 38px;
}

.wan p:nth-child(2) img:nth-child(2) {
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%;
}

.wan p:nth-child(2) .iii {
  animation: rot 1s linear infinite;
}
@keyframes rot {
  100% {
    transform: rotate(360deg);
  }
}
/* 大图 */
.imgs {
  left: 0px;
  top: 148px;
  width: 414px;
  height: 182px;
  line-height: 20px;
  border-radius: 0px 0px 26px 26px;
  text-align: center;
  background: white;
  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}
.imgs img {
  margin-top: 12px;
  left: 14px;
  top: 160px;
  width: 386px;
  height: 158px;
  border-radius: 26px;
}

/* 图片拖拽区 */
.touchqu {
  margin-top: 10px;
  width: 414px;
  height: 204px;
  line-height: 20px;
  border-radius: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}

.touchqu .bigtouchqu {
  width: 386px;
  height: 182px;
  text-align: center;
  line-height: 182px;
  background: white;
  overflow: hidden;
}
.touchqu .bigtouchqu .chang {
  border-radius: 26px;
  display: flex;
  width: 1074px;
  background: white;
  height: 182px;
  /* position: relative;
  z-index: -10; */
}
.touchqu .bigtouchqu .chang > div {
  width: 343px;
  height: 182px;
  line-height: 20px;
  border-radius: 26px;
  /* position: relative;
  z-index: 1555; */
  background-color: rgba(253, 211, 60, 100);
  text-align: center;
}
.touchqu .bigtouchqu .chang div:nth-child(1) {
  margin-right: 15px;
  background: #fdd33c;
}
.touchqu .bigtouchqu .chang div:nth-child(2) {
  background: #09d0b2 1%;

  margin-right: 15px;
}
.touchqu .bigtouchqu .chang div:nth-child(3) {
  background: #fd8ebe;
}
.touchqu .bigtouchqu .chang > div p:nth-child(1) {
  width: 117px;
  padding-top: 19px;
  padding-left: 24px;
  font-weight: 700;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;
  font-size: 23px;

  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(2) {
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 38px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;

  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) {
  background-color: transparent;
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 44px;

  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);

  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) span:nth-child(1) {
  width: 24px;
  font-size: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 5px;

  /* background: olivedrab; */
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) span:nth-child(2) {
  left: 53px;
  top: 144px;
  width: 70px;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  background-color: transparent;

  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div div {
  background-color: transparent;
  left: 267px;
  top: -14px;
  width: 76px;
  height: 30px;
  position: relative;
  line-height: 20px;
  border-radius: 26px 0px 26px 0px;

  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  /* background-position: right bottom; */
}

.touchqu .bigtouchqu .chang div:nth-child(1) div {
  background-color: rgba(9, 208, 178, 100);
}
.touchqu .bigtouchqu .chang div:nth-child(2) div {
  background-color: rgb(255, 0, 86);
}
.touchqu .bigtouchqu .chang div:nth-child(3) div {
  background-color: #ffc805;
}

.touchqu .bigtouchqu .chang > div div span {
  background-color: transparent;
  color: rgba(255, 255, 255, 100);
  width: 50px;
  height: 30px;
  /* color: rgba(255, 255, 255, 100); */
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  font-family: 方正准圆-标准;
  display: inline-block;
}
/* 底部 */
.last {
  left: 0px;
  top: 554px;
  width: 414px;
  height: 940px;
  margin-top: 10px;
  line-height: 20px;
  border-radius: 26px;
  /* text-align: center; */
  background: white;
  overflow: hidden;

  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}
.last ul {
  height: 48px;
  width: 414px;
  /* background: wheat; */
  line-height: 48px;
  display: flex;
  /* text-align: center; */
}

.isFixed {
  position: fixed;
  background-color: #fff;
  top: 88px;
  z-index: 999;
}
.last ul li {
  list-style: none;
  left: 84px;
  top: 566px;
  line-height: 24px;
  margin-top: 12px;
  width: 80px;
  height: 24px;
  color: rgba(168, 168, 168, 100);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-regular;
  margin-right: 3px;
}
.last ul .bg {
  left: 167px;
  top: 566px;
  width: 80px;
  font-weight: 700;

  height: 24px;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  text-align: center;
  font-family: PingFangSC-regular;
}
.last .cont {
  /* height: 48px; */
  width: 414px;
  /* background: wheat; */
  /* line-height: 48px; */
  display: flex;
  flex-wrap: wrap;
  /* text-align: center; */
}
.last .cont .pages {
  width: 180px;
  margin-top: 23px;
  margin-right: 12px;
  /* background: chartreuse; */
  height: 273px;
  margin-left: 14px;
}
.last .cont .pages img {
  margin-bottom: 12px;
}
.last .cont .pages .pp p:nth-child(1) {
  left: 14px;
  top: 817px;
  width: 180px;
  height: 51px;
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.last .cont .pages .pp p:nth-child(2) span:nth-child(1) {
  width: 66px;
  height: 24px;
  line-height: 17px;
  border-radius: 20px;
  background-color: rgba(255, 199, 0, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 12px;
  display: inline-block;
  line-height: 24px;

  margin-right: 6px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(255, 230, 139, 100);
  font-family: Arial;
}
.last .cont .pages .pp p:nth-child(2) span:nth-child(2) {
  width: 48px;
  height: 24px;
  line-height: 17px;
  border-radius: 20px;
  background-color: rgba(9, 207, 177, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 12px;
  display: inline-block;
  line-height: 24px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(201, 255, 249, 100);
  font-family: Arial;
}

/* 底部 */
.bottom {
  margin-top: 30px;
  width: 414px;
  height: 60px;
  line-height: 20px;
  border-radius: 26px 26px 0px 0px;
  text-align: center;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px -2px 6px 0px rgba(225, 225, 225, 40);
}
.bottom .on {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom .on div {
  width: 66px;
  height: 66px;
  line-height: 20px;
  background-color: rgba(10, 206, 176, 100);
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 100);
  border-radius: 50%;
}
.bottom .on div img {
  margin-top: 15px;
  /* margin-left: 17px; */
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
}
.bottom .on:nth-child(3) span {
  width: 24px;
  height: 17px;
  color: rgba(190, 191, 190, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.icon-sousuo {
  margin-left: 145px;
}
</style>